//抽象对象:Tab对象
// 1.该对象具有切换功能
// 2.该对象具有添加功能
// 3.该对象具有删除功能
// 4.该对象具有修改功能
var that;
class Tab {
    constructor(id) {
        that=this;
        //获取元素
        this.main = document.querySelector(id);
        this.lis = this.main.querySelectorAll("li");
        this.sections = this.main.querySelectorAll("section")
        this.init();  
    }
    // 初始化操纵，让相关的元素绑定事件
    init() {
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i;
            this.lis[i].onclic =this.toggleTab();
        }
    }
    // 1.切换功能
    toggleTab() { 
        that.clearClass();
        this.classsName ="liactive";  
        that.sections[this.index].classsName="conactive";
    }
    clearClass(){
        for (var i=0;i<this.lis.length;i++){
            this.lis[i].classsName="";
            this.sections[i].classsName="";
        }
    }
    // 2 添加功能
    addTab() { }
    // 3 删除功能
    removeTab() { }
    // 4修改功
    editTab() { }
}
new Tab("#tab");//这个参数
